<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__WX__/mui/css/mui.min.css" rel="stylesheet" />
		<link href="__WX__/css/iconfont.css" rel="stylesheet" />
	</head>
	<script src="__WX__/js/jquery.min.js"></script>
	<style>
		
		.mui-slider-item img
		{
			height: 220px;
		}
		.tu{
			height:85px;
		}
		.mui-bar-tab .mui-tab-item.mui-active{
			color:#53caff	
		}
		
		
		ul li{
			list-style: none;
			padding:0;
			margin:0;
			border:0;
		}
		.box{ height:50px; background:#fff; overflow:hidden;padding-top:18px;margin-bottom:5px;}
		.t_news{ height:20px;  color:#d7d7d7;   overflow:hidden; position:relative;}
		.t_news b{overflow:hidden;line-height:20px; font-weight:bold; display:inline-block;}
		.news_li,.swap{ width:100%;padding-top:3px;line-height:20px; display:inline-block; position:absolute; top:0; left:0px;overflow: hidden;}
		.news_li a,.swap a{ color:#333;}
		.swap{top:0px;}
		.top{
			height:150px;overflow: hidden;
			background:url('__WX__/img/userbj.jpg') no-repeat;
			background-size:100%;
		}
	</style>
	<body style="margin:0px;">
		<div class="mui-content">
			<header class="mui-bar mui-bar-nav">
			  
			  <h1 class="mui-title">会员中心</h1>
			</header>
			
			<div class="mui-slider" style="margin-top:0px;margin-top:45px;">
				  <div class="top" style="">
				  	<div style="width:120px;height:120px;background-color:#fff;border-radius:50%;margin:15px 15px;float:left;"><img src="{:session('headimgurl')}" style="width:100%;height:100%;"></div>
				  	<div style="width:auto;height:100px;margin:25px 0px;float:left;">
				  		<!--<div style="color:#fff;line-height:26px;">ID:15174903233</div>-->
				  		<div style="color:#fff;line-height:26px;">姓名：{$regiserInfo.name}</div>
				  		<div style="color:#fff;line-height:26px;">账号：{$regiserInfo.phone}</div>
				  		<div style="color:#fff;line-height:26px;">
				  			<soan>
								{if condition="$regiserInfo.type == 1"}
				  				  <img src="__WX__/img/pu.png" style="width:45px;">
								{elseif condition="$regiserInfo.type == 2"}
								  <img src="__WX__/img/shi.png" style="width:45px;">
								{/if}
				  			</soan>
				  		</div>
				  	</div>
				  </div>
			</div>
			

			<!--top  end-->
			<!--图标导航  start-->
			<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color:#fff;padding-bottom:20px;">
				<li class="tu mui-table-view-cell mui-media mui-col-xs-3 pass" style="border:0px;">
					<a href="#">
						<span class="mui-icon iconfont icon-xiugaimima " style="background-color:#3DBEE5;border-radius:50%;color:#fff">
						</span>
						<div class="mui-media-body" style="font-size:14px;">修改密码</div>
					</a>
				</li>
				<li class="tu mui-table-view-cell mui-media mui-col-xs-3 add" style="border:0px;">
					<a href="#">
						<span class="mui-icon iconfont icon-19" style="background-color:#80CD1F;border-radius:50%;color:#fff"></span>
						<div class="mui-media-body" style="font-size:14px;">更换账号</div>
					</a>
				</li>
				<li class="tu mui-table-view-cell mui-media mui-col-xs-3" style="border:0px;">
					<a href="{:url('Apply/apply')}">
						<span class="mui-icon iconfont icon-tubiaolunkuo_huaban" style="background-color:#FF4352;border-radius:50%;color:#fff"></span>
						<div class="mui-media-body" style="font-size:14px;">我要申请</div>
					</a>
				</li>


				<li class="tu mui-table-view-cell mui-media mui-col-xs-3" style="border:0px;">
					<a href="{:url('Order/order')}">
						<span class="mui-icon iconfont icon-wodedingdan" style="background-color:#FFBE2E;border-radius:50%;color:#fff"></span>
						<div class="mui-media-body" style="font-size:14px;">我的订单</div>
					</a>
				</li>

				
			</ul>
			<!--图标导航  end-->
			
			<ul class="mui-table-view" style="margin-bottom:50px;">
				 {if condition="$regiserInfo.type==2"}
				 <li class="mui-table-view-cell">
					 <a href="{:url('Order/sh_order')}">
				  	<span class="mui-icon iconfont icon-shouye" style=";border-radius:50%;color:#000;font-size:22px;"></span>&nbsp;商户订单
				    </a>
				  </li>
				{/if}
				 
				  <li class="mui-table-view-cell">
				    <a class="mui-navigate-right" href="tel:0472-6989970">
				  	<span class="mui-icon iconfont icon-kefu" style=";border-radius:50%;color:#000;font-size:22px;"></span>&nbsp;联系我们
				    </a>
				  </li>
				  
				  <li class="mui-table-view-cell">
				    <a class="mui-navigate-right" onclick="mui.alert('创世奇点网络科技有限公司</br>13654872467')">
				    	<span class="mui-icon iconfont icon-kefu" style=";border-radius:50%;color:#000;font-size:22px;"></span>&nbsp;技术支持
				    </a>
				  </li>

					<li class="mui-table-view-cell">
						  <span>
								<button type="button" class="mui-btn logout" style="width:100%;background-color:#53caff;color:#fff;height:40px;border:0px;margin-top:5px;font-size:18px;">退出当前账号</button>
						  </span>
					</li>

			</ul>
		</div>
		<div id="popover_pass" class="mui-popover" style="background-color:#fff;position:fixed;top:120px;left:50px;padding-top:10px;">
			<div style="text-align: center;"><img class="xuzhi" src="__WX__/img/xuzhi.png" style="width:31px;vertical-align:middle;">修改密码</div>
			<div style="padding:10px;margin-bottom:15px">
				<form id="password">
					<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
						<label style="width:22%;padding:0px;margin-top:11px;border-right:2px solid #999">原密码</label>
						<input type="password" name="last_password" class="mui-input-clear " placeholder="请输入原密码" style="width:66%;float:left;padding-left:6px;">
						<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:12%;height:40px;border:0px;">
							<img src="__WX__/img/zhanghao.png" style="width:17px;">
						</button>
					</div>
					<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
						<label style="width:22%;padding:0px;margin-top:11px;border-right:2px solid #999">新密码</label>
						<input type="password" name="password" class="mui-input-clear " placeholder="请输入新密码" style="width:50%;float:left;padding-left:6px;">
						<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:12%;height:40px;border:0px;">
							<img src="__WX__/img/zhanghao.png" style="width:17px;">
						</button>
					</div>
					<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
						<label style="width:30%;padding:0px;margin-top:11px;border-right:2px solid #999">确认密码</label>
						<input type="password" name="password_show" class="mui-input-clear " placeholder="请输入确认密码" style="width:55%;float:left;padding-left:6px;">
						<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
							<img src="__WX__/img/password.png" style="width:200%;">
						</button>
					</div>
				</form>
			</div>
			<div  style="width:100%;height:40px;text-align: center;line-height:40px;border-top:1px solid #ccc;color:#53caff">
				<div  class="ok_no" style="width:50%;text-align: center;float:left">取消</div>
				<div class="ok update_pass" style="width:50%;text-align: center;float:left">确定</div>
			</div>
		</div>
		<div id="popover2" class="mui-popover" style="width:83%;background-color: #fff;position:fixed;left: 50%;top: 45%;transform: translate(-50%,-50%);padding-top:10px;height: 250px;">
			<div class="mui-scroll-wrapper" style="margin-top: 10px;">
				<div class="mui-scroll">
					<ul class="mui-table-view" style="background-color:#fff;">
						<div style="text-align: center;"><img class="xuzhi" src="__WX__/img/xuzhi.png" style="width:31px;vertical-align:middle;">更改账户</div>
						<div style="padding:10px;">
							<form id="setPhone" style="background-color:#fff;">
								<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
									<label style="width:22%;padding:0px;margin-top:11px;border-right:2px solid #999">密码</label>
									<input type="password" name="password" class="mui-input-clear " placeholder="请输入原账户密码" style="width:66%;float:left;padding-left:6px;">
									<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:12%;height:40px;border:0px;">
										<img src="__WX__/img/zhanghao.png" style="width:17px;">
									</button>
								</div>
								<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
									<label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">新账号</label>
									<input type="text" name="phone"  placeholder="输入新手机号" class="a"  style="width:66%;float:left;padding-left:6px;">
									<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:14%;height:40px;border:0px;overflow: hidden;background-color: #fff;">
										<!--<img src="__WX__/img/phone_new.png" style="width:18px;">-->
									</button>
								</div>
								<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
									<label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">验证码</label>
									<input type="text" name="code" class="mui-input-clear a" placeholder="输入验证码" style="width:43%;float:left;padding-left:6px;">
									<button type="button" data-loading-icon-position="right" class="mui-btn code" style="width:37%;height:33px;border:0px;border-left:1px solid #ccc;background-color:#ccc;color:#fff;overflow: hidden;text-align:center;line-height: 12.5px;">发送验证码</button>
								</div>
							</form>
						</div>
					</ul>
				</div>
			</div>
			<div class="ok submit" style="width:100%;text-align: center;line-height:40px;border-top:1px solid #ccc;color:#53caff;height:40px;margin-top:235px;position: relative;background-color: #fff;border-radius:0px 0px 8px 8px;">确定</div>
		</div>
		<script src="__WX__/mui/js/mui.min.js"></script>
		<script>
            mui.init();
            mui.ready(function () {
                mui('.mui-scroll-wrapper').scroll();
            });
            $(".pass").click(function(){
                mui('#popover_pass').popover('show');
            });
            //取消修改密码
            $(".ok_no").click(function(){
                mui('.mui-popover').popover('hide');
            });
            //确认修改密码
            $(".update_pass").click(function(){
                $.ajax({
                    url:'setPassword',
                    type:'post',
                    data:$('#password').serialize(),
                    success:function(res){
                        if(res == 200){
                            mui.alert('成功修改密码');
                            mui('.mui-popover').popover('hide');
                        }else{
                            mui.alert(res.msg);
                        }
                    }
                })
            });
            $(".add").click(function(){
                mui('#popover2').popover('show');
            });
            //修改发送按钮颜色
            $($("input[name=phone]")).bind('input onpropertychange',function(){
                if($(this).val() > 0){
                    $(".code").css('background','#20C1CC');return false;
                }else{
                    $(".code").css('background','#ccc');return false;
                }
            });

            //调用短信发送接口
            $(".code").click(function(){
                var phone = $("input[name=phone]").val();
                var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if(myreg .test(phone)){
                    $.ajax({
                        type:'post',
                        url:'code',
                        data:{phone:phone},
                        success:function(res){
                            if(res == 200){
                                mui.alert('验证码已发送，请稍后...')
                            }else{
                                mui.alert(res.msg);
                            }
                        }
                    });
                }else{
                    mui.alert( phone +"不是电话");
                    $("input[name=phone]").val(null);
                    return false;
                }
            });

            //更改账户
            $(".submit").click(function(){
                mui.confirm('确认更改？', null, function(event) {
                    var index = event.index;
                    if (index === 1) {
                        $.ajax({
                            url:'setPhone',
                            type:"post",
                            data:$('#setPhone').serialize(),
                            success:function(res){
                                if(res == 200){
                                    mui.alert('更改成功');
                                    setTimeout(function(){ window.location.reload() }, 1500);
                                }else{
                                    mui.alert(res.msg);
                                }
                            }
                        });
                    }
                });
            });
            //退出登录
            $(".logout").click(function(){
                mui.confirm("确定要退出当前账号吗？",
                    "尚未退出账号",["取消","确定"],function(e){
                        if(e.index == 1){
                            $.ajax({
                                url:'{:url("Home/loginOut")}',
                                type:'post',
                                success:function(res){
                                    if(res == 200){
                                        setTimeout(function(){
                                            window.location.href="{:url('Home/login')}";
                                        },1000);
                                    }else{
                                        mui.alert(res.msg);
                                    }
                                }
                            })
                        }
                    },'div')
            });
		</script>
	</body>
</html>